<template>
  <div>
    <div>
      <h5>拍照上传头像(解决了图片被旋转90度)</h5>
      <div>
        
        <van-uploader :before-read="beforeRead" />
        <van-cell-group>
            <van-field v-model="username" label="用户名" placeholder="请输入用户名" />
        </van-cell-group>
        <van-cell-group>
            <van-field v-model="userphone" label="手机号码"  type="tel" placeholder="请输入手机号码" />
        </van-cell-group>
      </div>
      <van-button type="info" block @click="handleInfo">提交信息</van-button>
    </div>
  </div>
</template>
<script>
import { Uploader ,Field ,CellGroup ,Button } from "vant";
import Compressor from "compressorjs";
export default {
  components: {
    [Uploader.name]: Uploader,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button
  },
  data(){
      return{
          username:"",
          userphone:""
      }
  },
  methods: {
    beforeRead(file) {
      return new Promise(resolve => {
        // compressorjs 默认开启 checkOrientation 选项
        // 会将图片修正为正确方向
        new Compressor(file, {
          success: resolve,
          error(err) {
            console.log(err.message);
          }
        });
      });
    },
    handleInfo(){
        if(this.username!="" && this.userphone !=""){
            // this.$store.commit('store/setInfo',{name:this.username,phone:this.userphone})
            this.$store.commit("setInfo", {name:this.username,phone:this.userphone});
            this.$router.push('personal')
        }else{
            this.$toast("请检查用户名及手机号是否填写完整")
        }
    }

  }
};
</script>
<style lang="less" scoped>
</style>